<template>
  <div>
    <div class="table-header">
      <h4>商品信息</h4>
      <el-button type="primary" @click="AddPro()">+新建</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="ProListData" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />

      <el-table-column prop="name" label="名字" width="180" align="center" />

      <el-table-column label="主图" width="180" align="center">
        <template #default="scope">
          <img :src="scope.row.coverImage" alt="" class="table-img" />
        </template>
      </el-table-column>



      <el-table-column prop="amount" label="描述" width="180" align="center" />

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="AddProShowBox" v-show="AddProShow">
    <el-form
      ref="AddProFormRef"
      :model="obj"
      style="max-width: 600px"
      label-width="auto"
      class="addForm"
      status-icon
    >
      <el-form-item label="名字">
        <el-input v-model="ProObj.name" prop="proname" />
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" v-model="ProObj.desc" prop="desc" />
      </el-form-item>

      <el-form-item label="图片">
        <span>待完善</span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="createPro()"> 确定 </el-button>
        <el-button type="danger" @click="cancel()"> 取消 </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 分页器 -->
  <div class=".Paginator">
    <el-pagination layout="prev, pager, next" :total="total" @change="pagerChange($event)" />
  </div>

  <!-- 抽屉 -->
  <el-drawer v-model="showdrawer" direction="rtl">
    <template #header>
      <h4>修改内容</h4>
    </template>
    <template #default>
      <div>
        <el-form
          ref="ruleFormRef"
          :model="obj"
          style="max-width: 600px"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="名字">
            <el-input v-model="obj.name" prop="proname" />
          </el-form-item>

          <el-form-item label="简介">
            <el-input type="textarea" v-model="obj.desc" prop="desc" />
          </el-form-item>

          <el-form-item label="图片">
            <span>待完善</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 修改 </el-button>
          </el-form-item>

        </el-form>
      </div>

    </template>
  </el-drawer>
</template>

<script setup>
const token = ref(localStorage.getItem('admin-token'))
import { getProductListReq, modifyProductReq, delProductReq, addProductReq } from '@/api/Product'
import { ref } from 'vue'
let ProListData = ref([])
getproList()
let total = ref(0)
function getproList(per = 1, page = 10) {
  getProductListReq(per, page).then((res) => {
    console.log(res.data)
    total.value = res.data.total

    ProListData.value = res.data.data
  })
}

/**
 * 1.点击编辑按钮，打开抽屉
 * 2.抽屉内表单数据回显
 * 3.提交表单
 */
//编辑部分
let showdrawer = ref(false)

let obj = ref({})
let content = ''
let category = {}

//打开编辑
function handleEdit(row) {
  showdrawer.value = true
  
  obj.value.id = row.id
  obj.value.name = row.name
  obj.value.categoryName = row.category.name
  obj.value.coverImage = row.coverImage
  obj.value.price = row.price
  obj.value.amount = row.amount
  obj.value.desc = row.desc

  content = row.content
  category = row.category
}
//提交
function submitForm() {
  console.log('点击了提交')
  modifyProductReq(
    obj.value.id,
    obj.value.name,
    obj.value.coverImage,
    obj.value.desc,
    content,
    obj.value.price,
    obj.value.categoryName * 1,
    obj.value.amount,
  ).then((res) => {
    console.log(res.data)
    if (res.data.id == obj.value.id) {
      showdrawer.value = false
      getproList()
      ElMessage.success('修改成功！')
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
//删除
const handleDelete = (row) => {
  console.log('点击了删除', row)

  delProductReq(row.id).then((res) => {
    if (res.data.id == row.id) {
      ElMessage.success('删除成功！')
      getproList()
    }
  })
}

//分页器
function pagerChange(count) {
  getproList(count)
}
//添加
let AddProShow = ref(false)

function AddPro() {
  AddProShow.value = true
}
function cancel() {
  AddProShow.value = false
}
let ProObj = ref({})
function createPro() {
  console.log(ProObj.value)
  addProductReq(
    ProObj.value.name,
    ProObj.value.categoryName,
    ProObj.value.desc,
    ProObj.value.price,
    ProObj.value.amount,
    ProObj.value.content,
  ).then((res) => {
    if (res.data.id) {
      ElMessage.success('添加成功！')
      getproList()
      cancel()
    }
  })
}
</script>

<style scoped lang="scss">
.table-img {
  width: 75px;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.AddProShowBox {
  display: flex;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: 0.7);
  position: absolute;
  left: 0;
  top: 0;
}
.addForm {
  padding: 15px;
  margin: auto;
  background-color: #fff;
  min-width: 500px;
}
</style>
